

<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Community Round-up #24 - React Blog</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <meta property="og:title" content="Community Round-up #24 - React Blog">
  <meta property="og:type" content="article">
  <meta property="og:url" content="https://facebook.github.io/react/blog/2014/11/25/community-roundup-24.html">
  <meta property="og:image" content="https://facebook.github.io/react/img/logo_og.png">
  <meta property="og:description" content="Keep it Simple
">
  <meta property="fb:app_id" content="623268441017527">

  <link rel="shortcut icon" href="/react/favicon.ico">
  <link rel="alternate" type="application/rss+xml" title="React" href="https://facebook.github.io/react/feed.xml">

  <link rel="stylesheet" href="//cdn.bootcss.com/docsearch.js/1.3.0/docsearch.min.css" />
  <link rel="stylesheet" href="/react/css/syntax.css">
  <link rel="stylesheet" href="/react/css/codemirror.css">
  <link rel="stylesheet" href="/react/css/react.css">

  <script src="//use.typekit.net/vqa1hcx.js"></script>
  <script>try{Typekit.load();}catch(e){}</script>

  <!--[if lte IE 8]>
  <script src="https://unpkg.com/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-shim.min.js"></script>
  <script src="https://unpkg.com/es5-shim@4.5.9/es5-sham.min.js"></script>
  <![endif]-->

  <script src="//cdn.bootcss.com/docsearch.js/1.5.0/docsearch.min.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/codemirror.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/javascript/javascript.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/xml/xml.js"></script>
  <script src="//cdn.bootcss.com/codemirror/5.15.2/mode/jsx/jsx.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react.min.js"></script>
  <script src="//cdn.bootcss.com/react/15.5.4/react-dom.min.js"></script>
  <script src="//cdn.bootcss.com/babel-standalone/6.15.0/babel.min.js"></script>

  <script src="/react/js/live_editor.js"></script>
</head>
<body>

  <div class="container">

    <div class="nav-main">
  <div class="wrap">
    <a class="nav-home" href="/react/">
      <img class="nav-logo" src="/react/img/logo.svg" width="36" height="36">
      React
    </a>
    <div class="nav-lists">
      <ul class="nav-site nav-site-internal">
        <li><a href="/react/docs/hello-world.html">Docs</a></li>
        <li><a href="/react/tutorial/tutorial.html">Tutorial</a></li>
        <li><a href="/react/community/support.html">Community</a></li>
        <li><a href="/react/blog/" class="active">Blog</a></li>
        <li class="nav-site-search">
          <input id="algolia-doc-search" type="text" placeholder="Search docs..." />
        </li>
      </ul>
      <ul class="nav-site nav-site-external">
        <li><a href="https://github.com/facebook/react">GitHub</a></li>
        <li><a href="https://github.com/facebook/react/releases">v15.5.4</a></li>
      </ul>
    </div>
  </div>
</div>


    <section class="content wrap blogContent">

  <div class="inner-content">
    

<h1>

  Community Round-up #24

</h1>

<p class="meta">
  November 25, 2014
  by
  
    
      <a href="https://twitter.com/steveluscher">Steven Luscher</a>
    
    
  
</p>

<hr>

<div class="post">
  <h2>Keep it Simple</h2>

<p>Pedro Nauck (<a href="https://github.com/pedronauck">pedronauck</a>) delivered an impeccably illustrated deck at Brazil&#39;s <em>Front in Floripa</em> conference. Watch him talk about how to keep delivering value as your app scales, by keeping your development process simple.</p>

<script async class="speakerdeck-embed" data-id="44129b9054c901328b89221e99b278fe" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script>

<p>Murilo Pereira (<a href="https://github.com/mpereira">mpereira</a>) tussles with the topic of complexity in this blog post about <a href="http://www.techsonian.net/2014/09/from-backbone-to-react-our-experience-scaling-a-web-application/">coping with scaling up</a>, where he describes how his team used React to make possible the “nearly impossible.”</p>

<p>I (<a href="https://github.com/steveluscher">steveluscher</a>) spoke at Manning Publications&#39; “Powered By JavaScript” Strangeloop pre-conf in St. Louis. There, I proposed a new notation to talk about development complexity – Big-Coffee Notation ☕(n) – and spoke about the features of React that help keep our Big-Coffee from going quadratic, as our user interfaces get more complex.</p>

<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/rI0GQc__0SM" frameborder="0" allowfullscreen></iframe>

<p>James Pearce (<a href="https://github.com/jamesgpearce">jamesgpearce</a>) carried Big-Coffee all the way to Raleigh, NC. At the <em>All Things Open</em> conference, he spoke about some of the design decisions that went into React, particularly those that lend themselves to simpler, more reliable code.</p>

<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/m2fuO2wl_3c" frameborder="0" allowfullscreen></iframe>

<h2>All About Isomorphism</h2>

<p>Michael Ridgway (<a href="https://github.com/mridgway">mridgway</a>) shows us how Yahoo! (who recently <a href="http://www.slideshare.net/rmsguhan/react-meetup-mailonreact">moved Yahoo! Mail to React</a>) renders their React+Flux application, server-side.</p>

<script async class="speakerdeck-embed" data-id="87ecaa3048750132f42542ffc18c6fcf" data-ratio="1.77777777777778" src="//speakerdeck.com/assets/embed.js"></script>

<p>Péter Márton (<a href="https://github.com/hekike">hekike</a>) helps us brew a cold one (literally) using an application that&#39;s server-client <a href="http://blog.risingstack.com/from-angularjs-to-react-the-isomorphic-way/">isomorphic and indexable</a>. Demo and sample code included – cold ones sold separately.</p>

<p>And, lest you think that client-server isomorphism exists in pursuit of crawalable, indexable HTML alone, watch as Nate Hunzaker (<a href="https://github.com/nhunzaker">nhunzaker</a>) <a href="http://viget.com/extend/visualization-is-for-sharing-using-react-for-portable-data-visualization">server renders data visualizations as SVG</a> with React.</p>

<h2>React Router Mows the Lawn</h2>

<p>Ryan Florence (<a href="https://github.com/rpflorence%5D">rpflorence</a>) and Michael Jackson (<a href="https://github.com/mjackson">mjackson</a>) unveiled a new API for <a href="https://github.com/rackt/react-router">React Router</a> that solves some of its user&#39;s problems by eliminating the problems themselves. Read all about what React Router learned from its community of users, and how they&#39;ve <a href="https://github.com/rackt/react-router/wiki/Announcements">rolled your ideas into their latest release</a>.</p>

<h2>React in Practice</h2>

<p>Jonathan Beebe (<a href="https://github.com/somethingkindawierd">somethingkindawierd</a>) spoke about how he uses React to build tools that deliver hope to those trying to make the best of a bad situation. Watch his talk from this year&#39;s <em>Nodevember</em> conference in Nashville</p>

<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/uZgAq1CZ1N8" frameborder="0" allowfullscreen></iframe>

<p>If you take a peek under the covers, you&#39;ll find that React powers <a href="https://blog.carousel.com/2014/11/introducing-carousel-for-web-ipad-and-android-tablet/">Carousel</a>, Dropbox&#39;s new photo and video gallery app.</p>

<p>We enjoyed a cinematic/narrative experience with this React-powered, interactive story by British author William Boyd. Dive into “<a href="https://thevanishinggame.wellstoried.com">The Vanishing Game</a>” and see for yourself.</p>

<h2>Be Kind, Rewind</h2>

<p>Spend the next 60 seconds watching Daniel Woelfel (<a href="https://github.com/dwwoelfel">dwwoelfel</a>) serialize a React app&#39;s state as a string, then deserialize it to produce a working UI. Read about how he uses this technique to <a href="http://blog.circleci.com/local-state-global-concerns/">reproduce bugs</a> reported to him by his users.</p>

<iframe width="100%" height="315" src="//www.youtube-nocookie.com/embed/5yHFTN-_mOo" frameborder="0" allowfullscreen></iframe>

<h2>Community Components</h2>

<p>Tom Chen (<a href="https://github.com/tomchentw">tomchentw</a>) brings us a <a href="https://tomchentw.github.io/react-google-maps/">react-google-maps</a> component, and a way to syntax highlight source code using Prism and the <a href="https://tomchentw.github.io/react-prism/">react-prism</a> component, for good measure.</p>

<p>Jed Watson (<a href="https://github.com/JedWatson">jedwatson</a>) helps you manage touch, tap, and press events using the <a href="https://github.com/JedWatson/react-tappable">react-tappable</a> component.</p>

<p>To find these, and more community-built components, consult the <a href="http://react-components.com/">React Components</a> and <a href="http://react.rocks">React Rocks</a> component directories. React Rocks recently exceeded one-hundred listed components and counting. See one missing? Add the keyword <code>react-component</code> to your <code>package.json</code> to get listed on React Components, and <a href="https://docs.google.com/forms/d/1TpnwJmLcmmGj-_TI68upu_bKBViYeiKx7Aj9uKmV6wY/viewform">submit a link to React Rocks</a>.</p>

<h2>Waiter, There&#39;s a CSS In My JavaScript</h2>

<p>The internet is abuzz with talk of styling React components using JavaScript instead of CSS. Christopher Chedeau (<a href="https://github.com/vjeux">vjeux</a>) talks about some of the <a href="https://speakerdeck.com/vjeux/react-css-in-js">fundamental style management challenges</a> we grapple with, at Facebook scale. A number of implementations of JavaScript centric style management solutions have appeared in the wild, including the React-focused <a href="https://github.com/js-next/react-style">react-style</a>.</p>

<h2>Test Isolation</h2>

<p>Yahoo! shows us how they make use of <code>iframe</code> elements to <a href="http://yahooeng.tumblr.com/post/102274727496/to-testutil-or-not-to-testutil">unit test React components in isolation</a>.</p>

<h2>You&#39;ve Got The Hang of Flux, Now Let&#39;s Flow</h2>

<p>Facebook Open Source released <a href="https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/">Flow</a> this month – a static type checker for JavaScript. Naturally, Flow supports JSX, and you can use it to <a href="https://code.facebook.com/posts/1505962329687926/flow-a-new-static-type-checker-for-javascript/#compatibility">type check React applications</a>. There&#39;s never been a better reason to start making use of <code>propTypes</code> in your component specifications!</p>

<h2>Countdown to React.js Conf 2014</h2>

<p>We&#39;re counting down the days until <a href="http://conf.reactjs.com">React.js Conf</a> at Facebook&#39;s headquarters in Menlo Park, California, on January 28th &amp; 29th, 2015. Thank you, to everyone who responded to the Call for Presenters. Mark the dates; tickets go on sale in three waves: at noon PST on November 28th, December 5th, and December 12th, 2014.</p>

<h2>React Meetups Around the World</h2>

<blockquote class="twitter-tweet" lang="en"><p>React JS meetup having pretty good turn up rate today <a href="https://twitter.com/hashtag/londonreact?src=hash">#londonreact</a> <a href="http://t.co/c360dlVVAe">pic.twitter.com/c360dlVVAe</a></p>&mdash; Alexander Savin (@karismafilms) <a href="https://twitter.com/karismafilms/status/535152580377468928">November 19, 2014</a></blockquote>

<div class="skinny-row">
  <div class="skinny-col">
    <blockquote class="twitter-tweet" lang="en"><p>60+ attendees at the second React.js Utah meetup. <a href="https://twitter.com/ryanflorence">@ryanflorence</a> doing a great job, even without the internet. <a href="http://t.co/fV59AQTOyu">pic.twitter.com/fV59AQTOyu</a></p>&mdash; ReactJS Utah (@reactjsutah) <a href="https://twitter.com/reactjsutah/status/527259410020573184">October 29, 2014</a></blockquote>
  </div>
  <div class="skinny-col">
    <blockquote class="twitter-tweet" lang="en"><p><a href="https://twitter.com/hashtag/ReactJS?src=hash">#ReactJS</a> meetup at <a href="https://twitter.com/Yahoo">@Yahoo</a> ! History of <a href="https://twitter.com/yahoomail">@yahoomail</a> and why we chose react and NodeJS <a href="http://t.co/Nm4EdTv45G">pic.twitter.com/Nm4EdTv45G</a></p>&mdash; rmsguhan (@rmsguhan) <a href="https://twitter.com/rmsguhan/status/515370950427029504">September 26, 2014</a></blockquote>
  </div>
</div>

<div class="skinny-row">
  <div class="skinny-col">
    <blockquote class="twitter-tweet" data-cards="hidden" lang="en"><p>The very first ReactJS meetup in NYC tonight, I&#39;ll be speaking about the big ideas behind Om <a href="http://t.co/dvPrFqE9eP">http://t.co/dvPrFqE9eP</a></p>&mdash; David Nolen (@swannodette) <a href="https://twitter.com/swannodette/status/532190993463128064">November 11, 2014</a></blockquote>
  </div>
  <div class="skinny-col">
    <blockquote class="twitter-tweet" lang="en"><p>If anyone in Sydney is curious about <a href="https://twitter.com/reactjs">@reactjs</a>, I&#39;m presenting at <a href="https://twitter.com/sydjs">@sydjs</a> tonight on how to use it and why it is the future. <a href="https://twitter.com/hashtag/javascript?src=hash">#javascript</a></p>&mdash; Jed Watson (@JedWatson) <a href="https://twitter.com/JedWatson/status/534943557568565248">November 19, 2014</a></blockquote>
  </div>
</div>

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

</div>


  <div class="fb-like" data-send="true" data-width="650" data-show-faces="false"></div>


  </div>
  <div class="nav-docs nav-blog">
  <div class="nav-docs-section">
    <h3>Recent posts</h3>
    <ul>
      
        <li><a href="/react/blog/2017/04/07/react-v15.5.0.html">React v15.5.0</a></li>
      
        <li><a href="/react/blog/2016/11/16/react-v15.4.0.html">React v15.4.0</a></li>
      
        <li><a href="/react/blog/2016/09/28/our-first-50000-stars.html">Our First 50,000 Stars</a></li>
      
        <li><a href="/react/blog/2016/08/05/relay-state-of-the-state.html">Relay: State of the State</a></li>
      
        <li><a href="/react/blog/2016/07/22/create-apps-with-no-configuration.html">Create Apps with No Configuration</a></li>
      
        <li><a href="/react/blog/2016/07/13/mixins-considered-harmful.html">Mixins Considered Harmful</a></li>
      
        <li><a href="/react/blog/2016/07/11/introducing-reacts-error-code-system.html">Introducing React's Error Code System</a></li>
      
        <li><a href="/react/blog/2016/04/08/react-v15.0.1.html">React v15.0.1</a></li>
      
        <li><a href="/react/blog/2016/04/07/react-v15.html">React v15.0</a></li>
      
        <li><a href="/react/blog/2016/03/29/react-v0.14.8.html">React v0.14.8</a></li>
      
      <li><a href="/react/blog/all.html">All posts ...</a></li>
    </ul>
  </div>
</div>

</section>


    <footer class="nav-footer">
  <section class="sitemap">
    <a href="/react/" class="nav-home">
    </a>
    <div>
      <h5><a href="/react/docs/">Docs</a></h5>
      <a href="/react/docs/hello-world.html">Quick Start</a>
      <a href="/react/docs/thinking-in-react.html">Thinking in React</a>
      <a href="/react/tutorial/tutorial.html">Tutorial</a>
      <a href="/react/docs/jsx-in-depth.html">Advanced Guides</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Community</a></h5>
      <a href="http://stackoverflow.com/questions/tagged/reactjs" target="_blank">Stack Overflow</a>
      <a href="https://discuss.reactjs.org/" target="_blank">Discussion Forum</a>
      <a href="https://discord.gg/0ZcbPKXt5bZjGY5n" target="_blank">Reactiflux Chat</a>
      <a href="https://www.facebook.com/react" target="_blank">Facebook</a>
      <a href="https://twitter.com/reactjs" target="_blank">Twitter</a>
    </div>
    <div>
      <h5><a href="/react/community/support.html">Resources</a></h5>
      <a href="/react/community/conferences.html">Conferences</a>
      <a href="/react/community/videos.html">Videos</a>
      <a href="https://github.com/facebook/react/wiki/Examples" target="_blank">Examples</a>
      <a href="https://github.com/facebook/react/wiki/Complementary-Tools" target="_blank">Complementary Tools</a>
    </div>
    <div>
      <h5>More</h5>
      <a href="/react/blog/">Blog</a>
      <a href="https://github.com/facebook/react" target="_blank">GitHub</a>
      <a href="http://facebook.github.io/react-native/" target="_blank">React Native</a>
      <a href="/react/acknowledgements.html">Acknowledgements</a>
    </div>
  </section>
  <a href="https://code.facebook.com/projects/" target="_blank" class="fbOpenSource">
    <img src="/react/img/oss_logo.png" alt="Facebook Open Source" width="170" height="45"/>
  </a>
  <section class="copyright">
    Copyright © 2017 Facebook Inc.
  </section>
</footer>

  </div>

  <div id="fb-root"></div>
  <script src="/react/js/anchor-links.js"></script>
  <script>
    

    

    
    docsearch({
      apiKey: '36221914cce388c46d0420343e0bb32e',
      indexName: 'react',
      inputSelector: '#algolia-doc-search'
    });
  </script>
</body>
</html>
